<template>
  <div class="app-container">
    <div class="tool-main-card-content">
      <el-card
        class="box-card"
        shadow="hover"
        v-for="tool in toolList"
        :key="tool.id"
      >
        <div slot="header">
          <span class="tools-title">{{ tool.title }}</span>
        </div>
        <div>
          <span class="tools-content"> {{ tool.content }} </span>
        </div>
        <div>
          <el-button
            style="position: absolute; right: 10px; bottom: 5px"
            size="mini"
            @click="toFunction(tool.id)"
          >
            开始使用
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tools",
  data() {
    return {
      toolList: [
        {
          id: 1,
          title: "BASE64加密解密",
          content: "BASE64加密解密",
        },
        {
          id: 2,
          title: "SM加密解密",
          content: "SM加密解密",
        },
        {
          id: 3,
          title: "进制转换",
          content: "常用的一些进制转换",
        },
        {
          id: 4,
          title: "header格式化",
          content: "将header转换成各种格式",
        },
      ],
    };
  },
  methods: {
    toFunction(id) {
      switch (id) {
        case 1:
          {
            this.$router.push({
              path: "/tools/base64",
            });
          }
          break;
        case 2:
          {
            this.$router.push({
              path: "/tools/sm",
            });
          }
          break;
        case 3:
          {
            this.$router.push({
              path: "/tools/conversion",
            });
          }
          break;
        case 4:
          {
            this.$router.push({
              path: "/tools/headerformat",
            });
          }
          break;
      }
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 15vw;
  min-width: 250px;
  min-height: 150px;
  height: 15vh;
  overflow: hidden;
  background: linear-gradient(0deg, rgb(202, 202, 202), white);
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
}
.box-card:hover {
  box-shadow: 5px 5px 3px #b4b4b4;
}
.tools-title {
  font-size: 20px;
  font-weight: bolder;
  color: rgb(102, 168, 3);
}
.tools-content {
  font-size: 14px;
}
.tool-main-card-content {
  height: 70vh;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
</style>
